{% extends "base.html" %}{% load static %}
{% block title %}图书推荐{% endblock %}
{% block style %}
<style>
    html, body {
        background: linear-gradient(135deg, #1a1a1a, #2a2a2a) !important;
        min-height: 100vh;
    }

    #wrapper {
        background: linear-gradient(135deg, #1a1a1a, #2a2a2a) !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: calc(100vh - 116px) !important;
    }

    .recommend-container {
        width: 100%;
        max-width: 1200px;
        background: rgba(26, 26, 26, 0.8);
        border-radius: 15px;
        padding: 2rem;
        box-shadow: 0 0 30px rgba(0, 123, 255, 0.3);
        backdrop-filter: blur(10px);
        margin: 2rem auto;
        color: #fff;
    }

    .neon-text {
        color: #00bfff;
        text-shadow: 0 0 10px rgba(0, 191, 255, 0.5);
        font-size: 1.8rem;
        letter-spacing: 2px;
        margin-bottom: 2rem;
        text-align: center;
    }

    .card {
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 15px !important;
        backdrop-filter: blur(10px);
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .card:hover {
        transform: translateY(-10px);
        box-shadow: 0 10px 20px rgba(0, 123, 255, 0.3) !important;
    }

    .card-body {
        color: #fff;
    }

    .card-title {
        color: #00bfff;
    }

    .card-subtitle {
        color: rgba(255, 255, 255, 0.7) !important;
    }

    .price {
        color: #ff6b6b;
        font-weight: bold;
    }

    .recommendation-reason {
        position: absolute;
        bottom: -100%;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.9);
        padding: 15px;
        transition: all 0.3s ease;
        border-radius: 0 0 15px 15px;
    }

    .card:hover .recommendation-reason {
        bottom: 0;
    }

    .reason-title {
        color: #00bfff;
        font-size: 0.9rem;
        margin-bottom: 8px;
        text-align: center;
    }

    .reason-list {
        list-style: none;
        padding: 0;
        margin: 0;
        font-size: 0.8rem;
        color: #fff;
    }

    .reason-list li {
        margin-bottom: 5px;
        display: flex;
        align-items: center;
    }

    .reason-list li i {
        margin-right: 5px;
        color: #00bfff;
    }

    .similar-books {
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .similar-title {
        color: #00bfff;
        font-size: 0.8rem;
        margin-bottom: 5px;
    }

    .similar-list {
        list-style: none;
        padding: 0;
        margin: 0;
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.7);
    }

    .similar-list li {
        margin-bottom: 3px;
    }

    .similarity-score {
        color: #ff6b6b;
    }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <div class="recommend-container">
        <h2 class="neon-text">图书推荐</h2>
        <div class="row">
            {% for book in books %}
            <div class="col-md-4">
                <a href="{{ book.book_url }}" target="_blank" style="text-decoration: none;">
                    <div class="card mb-4">
                        <img class="card-img-top" src="{{ book.img_url }}" alt="{{ book.title }}"
                             style="height: 300px; object-fit: cover; border-radius: 15px 15px 0 0;">
                        <div class="card-body">
                            <h5 class="card-title">{{ book.title }}</h5>
                            <h6 class="card-subtitle mb-2">{{ book.press }}</h6>
                            <p class="card-text price">价格：{{ book.now_price }}元</p>
{#                            <p class="card-text">评分：{{ book.star }}（{{ book.comment_num }}条评论）</p>#}
                            <p class="card-text">发布时间：{{ book.createTime }}</p>
                        </div>

                        <!-- 推荐原因悬浮框 -->
                        <div class="recommendation-reason">
                            <h6 class="reason-title">推荐理由</h6>
                            <ul class="reason-list">
                                <li><i class="fas fa-star"></i>高评分：{{ book.star }}分</li>
                                <li><i class="fas fa-comments"></i>{{ book.comment_num }}条评论</li>
                                {% if book.discount %}
                                <li><i class="fas fa-tags"></i>优惠折扣：{{ book.discount }}%</li>
                                {% endif %}
                            </ul>

                            <div class="similar-books">
                                <div class="similar-title">相似推荐</div>
                                <ul class="similar-list">
                                    {% for similar in book.similar_books|slice:":3" %}
                                    <li>
                                        {{ similar.title }}
                                        <span class="similarity-score">(相似度: {{ similar.similarity|floatformat:2 }})</span>
                                    </li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            {% endfor %}
        </div>

        {% if books.paginator.num_pages > 1 %}
        <div class="pagination-container">
            <div class="pagination">
                {% if books.has_previous %}
                    <a href="?page=1" class="btn btn-secondary">&laquo; 首页</a>
                    <a href="?page={{ books.previous_page_number }}"
                       class="btn btn-secondary">{{ books.previous_page_number }}</a>
                {% endif %}

                <span class="current btn btn-danger btn-lg">{{ books.number }}</span>

                {% if books.has_next %}
                    <a href="?page={{ books.next_page_number }}"
                       class="btn btn-secondary">{{ books.next_page_number }}</a>
                    {% if books.number|add:1 < books.paginator.num_pages %}
                        <span>...</span>
                    {% endif %}
                    <a href="?page={{ books.paginator.num_pages }}"
                       class="btn btn-success">末页 &raquo;</a>
                {% endif %}
            </div>
            <div class="page-info">
                共 {{ books.paginator.count }} 本书 / {{ books.paginator.num_pages }} 页
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}
